<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  props: ['pickPoints'],
  data() {
    return {
      localPickPoints: {
        show: true,
        area: [
          {lng: null, lat: null}
        ],
        setAreaLabel: null,
        setCenter: null,
        center: {lng: null, lat: null}
      },
      mapInfo: {
        step: 1,
        placeSearch: null,
        mouseTool: null,
        map: null,
      }
    }
  },
  mounted() {
    this.localPickPoints = this.pickPoints
    this.initAMap()
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "81e4e1670dbfedf9aae96db38a432f7b",
      };
      AMapLoader.load({
        key: "1cfc6308190df66631827aa53b629e06",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.Buildings", "AMap.Marker"],
      })
          .then((AMap) => {
            const map = new AMap.Map("collect-map-point", {
              zoom:14,
              pitch:50,
              showBuildingBlock: true,
              showIndoorMap:true,
              showLabel:true,
              viewMode:'3D',
              center: [116.434381, 39.898515],
              mapStyle: "amap://styles/fresh",
              terrain: true
            });
            const localPickPoints = this.localPickPoints
            const mapInfo = this.mapInfo
            mapInfo.map = map
            AMap.plugin(["AMap.MouseTool"],function () {
              mapInfo.mouseTool = new AMap.MouseTool(map);
            });
            mapInfo.mouseTool.on('draw', function(event) {
              const pathArr = event.obj.getPath();
              console.log(pathArr)
              const step = mapInfo.step
              if (step > 1) {
                mapInfo.step = 1
                pathArr.forEach((item) => {
                  localPickPoints.area.push({
                    lng: item.lng,
                    lat: item.lat
                  })
                })
                if (localPickPoints.setAreaLabel) {
                  localPickPoints.setAreaLabel(localPickPoints.area)
                }
              }else {
                mapInfo.step = 2
                localPickPoints.center.lng = pathArr[0].lng
                localPickPoints.center.lat = pathArr[0].lat
                localPickPoints.area = []
                if (localPickPoints.setCenter) {
                  localPickPoints.setCenter(localPickPoints.center)
                }
              }
            })
            AMap.plugin(["AMap.PlaceSearch"], function() {
              //构造地点查询类
              mapInfo.placeSearch = new AMap.PlaceSearch({
                pageSize: 2, // 单页显示结果条数
                pageIndex: 1, // 页码
                city: "010", // 兴趣点城市
                citylimit: false,  //是否强制限制在设置的城市内搜索
                map: map, // 展现结果的地图实例
                panel: "choice-place-area", // 结果列表将在此容器中进行展示。
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
              });
            });
          })
          .catch((e) => {
            console.log(e);
          });
    },
    searchPlace: function () {
      const searchText = this.$refs.searchText.value;
      if (!searchText) {
        this.$message("请输入搜索内容")
      }else {
        this.mapInfo.placeSearch.search(searchText);
      }
    },
    removeAllOverlay: function () {
      this.mapInfo.map.clearMap();
    },
    drawPolygon: function () {
      this.mapInfo.mouseTool.polygon({
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: "solid"
      })
    },
    quiteOut: function () {
      this.localPickPoints.show = false
    }
  }
}
</script>

<template>
  <div>
    <div id="collect-map-point" style="position: fixed;float: left;width: 70%;height: 70%;left: 15%;top: 15%;z-index: 9998;"></div>
    <div id="choice-place-area" style="position: fixed;width: 300px;height: 150px;right: 15%;bottom: 21%;z-index: 9999;"></div>
    <div style="position: fixed;width: 300px;height: 300px;right: 15%;top: 15%;background-color: rgba(0, 0, 0, 0.5);line-height: 20px;vertical-align: center;padding: 10px 0;text-align: left;color: white;z-index: 9999;">
      <label style="margin-left: 20px;">搜索：</label><input type="text" ref="searchText" style="height: 30px;width: 150px;">&nbsp;&nbsp;&nbsp;<input type="button" style="height: 36px;width: 50px;" v-on:click="searchPlace" value="搜索"><br><br>
      <input type="button" style="margin-left: 20px;height: 36px;width: 90px;" value="清除覆盖物" v-on:click="removeAllOverlay">&nbsp;&nbsp;<input type="button" style="height: 36px;width: 90px;" :value="mapInfo.step === 1 ? '选择中心区' : '选择建筑区域'" v-on:click="drawPolygon"><br><br>
      <textarea style="margin-left: 20px;width: 275px;height: 30px;" :value="'中心点：' + JSON.stringify(localPickPoints.center)">
      </textarea>
      <textarea style="margin-left: 20px;width: 275px;height: 80px;" :value="'区域：' + JSON.stringify(localPickPoints.area)">
      </textarea>
      <input type="button" style="margin-left: 20px;height: 36px;width: 90px;" value="收集完毕" v-on:click="quiteOut">
    </div>
  </div>
</template>

<style>

</style>
